<template>
	<view class="content bacFFF poRel">
		<view class="wid100" style="border-bottom: 2rpx solid #E5E5E5;">
			<!-- <view class="hei20"></view> -->
			<view class="wid90 mar dis disJuB hei80">
				<view class="wid87 type-container_2">
					<scroll-view class="type-navbar_2 foSi25" style="color: #747474;" :scroll-x="true">
					    <view class="dis">
							<view class="poRel dis disAl hei80 mar-right40" @click.stop="selectjobtype(item.id)"
								:class="worktype == item.id ? 'foSi30 co337 fowebl' : ''" v-for="(item, index) in worktyelist" :key="index">
								<span>{{ item.name }}</span>
								<view class="poAbs wid100" :class="worktype == item.id ? 'cateselected' : ''"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="dis disAl">
				<!-- 	<image src="../../static/imgs/icon/shaixuan.png" style="width: 30rpx;height: 30rpx;"></image>
					<view class="foSi20" style="color: #747474;">筛选</view> -->
				</view>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 82rpx);" class="wid100" scroll-y="true" @scrolltolower="lower" v-if="list">
			<view style="height: 1rpx;"></view>
			<block v-for="(item,index) in list" :key="index">
				<view class="wid90 mar mar-top30 borRad20" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 30rpx 0;">
					<view class="wid90 mar dis">
						<view class="wid20">
							<view style="width: 70rpx;height: 70rpx;">
								<image :src="item.member_info.avatarUrl" class="wh100"></image>
							</view>
						</view>
						<view class="wid80">
							<view class="wid100 dis disAl" style="height: 70rpx;">
								<view>
									<view class="foSi30 fowebl" style="color: #737373;">{{ item.member_info.nickname }}</view>
									<view class="mar-top15 foSi20" style="color: #A3A3A3;">{{ item.createtime }}</view>
								</view>
							</view>
							<view class="wid100 dis disAl disJuB mar-top20">
								<view class="foSi30 fowebl">{{ item.content }}</view>
								<view @click="huifu(item.id)" class="foSi22 dis disAl disJuC borRad40" 
									style="border: 1px solid #BFBFBF;width: 90rpx;height: 40rpx;color: #585757;">回复</view>
							</view>
						</view>
					</view>
					<block v-for="(item2,index2) in item.childs" :key="index">
						<view class="wid90 mar mar-top30 borRad20" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 30rpx 0;">
							<view class="wid90 mar dis">
								<view class="wid20">
									<view style="width: 70rpx;height: 70rpx;">
										<image :src="item2.member_info.avatarUrl" class="wh100"></image>
									</view>
								</view>
								<view class="wid80">
									<view class="wid100 dis disAl" style="height: 70rpx;">
										<view>
											<view class="foSi30 fowebl" style="color: #737373;">{{ item2.member_info.nickname }}</view>
											<view class="mar-top15 foSi20" style="color: #A3A3A3;">{{ item2.createtime }}</view>
										</view>
									</view>
									<view class="wid100 dis disAl disJuB mar-top20">
										<view class="foSi30 fowebl">{{ item2.content }}</view>
										<!-- <view @click="huifu(item.id)" class="foSi22 dis disAl disJuC borRad40" 
											style="border: 1px solid #BFBFBF;width: 90rpx;height: 40rpx;color: #585757;">回复</view> -->
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>
			<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
				<view style="height: 50rpx;"></view>
				<view class="dis disJuC">
					<image src="../../static/imgs/icon/zanwu1.png" style="width: 400rpx;height: 300rpx;"></image>
				</view>
				<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
			</view>
			<view style="height: 50rpx;"></view>
		</scroll-view>
		
		<view class="poAbs wid100" style="height: 120rpx;bottom: 0;">
			<view class="wid90 mar hei80 dis disAl disJuC foSi30 borRad20 coFFF" 
				style="background-color: #3978F9;" @click.stop="liuyan">我要留言</view>
		</view>
		<view v-if="is_liu" class="wh100 poAbs zhezhao" @touchmove.stop.prevent="moveHandle">
			<view class="wh100 dis disAl disJuC" @click.stop="is_liu = false">
				<view class="borRad20 bacFFF wid80" @click.stop="">
					<view class="wid90 mar dis disAl disJuC poRel fowe800 foSi30" style="height: 100rpx;">
						<view>留言</view>
					</view>
					<view class="wid90 mar" style="border: 2rpx solid #eaeaea;padding: 10rpx;">
						<textarea class="wid100" v-model="liuInput" placeholder="请输入留言"/>
					</view>
					<view class="mar-top30 dis disAl disJuC borRad20 hei80 mar coFFF" @click.stop="fabu"
						style="width: 300rpx;background-color: #3978F9;">发布留言</view>
					<view class="hei20"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Message
	} from '../../model/message-model.js';
	var message = new Message();
	import { Config } from '../../utils/config.js';
	export default {
		data() {
			return {
				url: Config.restUrl,
				list: [],
				last_page: 0,
				page: 1,
				worktyelist: [
					{name: '最新留言', id: 1}
				],
				worktype: 1,
				is_liu: false,
				liuInput: '',
				is_huifu:false,
				reply_id:'', // 回复留言ID
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.page = 1
			this.getList()
		},
		methods: {
			huifu(id){
				this.is_huifu = true
				this.is_liu = true
				this.reply_id = id
			},
			moveHandle(){},
			liuyan(){
				this.is_huifu = false
				this.liuInput = ''
				this.is_liu = true
			},
			selectjobtype(id) {
			    var that = this;
				that.worktype = id
				that.page++
				that.getList()
			},
			fabu(){
				var that = this
				if(!that.liuInput){
					return uni.showToast({
						title: '请输入留言内容',
						icon: 'none'
					})
				}
				if(that.is_huifu){
					var params = {
						content: that.liuInput,
						reply_id:that.reply_id
					};
				}else{
					var params = {
						content: that.liuInput
					};
				}
				
				message.getMessageboardAdd((data) => {
					console.log(data)
					if (data.code === 0) {
						
						that.is_liu = false
						that.page = 1
						that.list = []
						that.liuInput = ''
						that.getList()
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
					uni.stopPullDownRefresh();
				}, params)
			},
			dateFormat(time) {
				let date = new Date();
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return year + "-" + month + "-" + day + ' '+hours+':'+minutes+':'+seconds;
			},
			getList(){
				var that = this
				var params = {
					page: that.page
				};
				message.getMessageboardLists((data) => {
					console.log(data)
					if (data.code === 0) {
						that.last_page = data.data.last_page
						that.list = that.page === 1?data.data.data:that.list.concat(data.data.data)
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 2000
						})
					}
					uni.stopPullDownRefresh();
				}, params)
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
	}
	.xia{
		height: 1rpx;
		background: #D2D2D2;
	}
	.co337 {
	    color: #337EE6;
	}
	
	.cateselected {
		height: 4rpx;
	    background: #337EE6;
		z-index: 1;
		bottom: -1rpx;
	}
</style>
